Learn how to create an amazing planetary system using HTML and pure CSS. Step-by-step tutorial with animations for a stunning solar system effect!
Table of Contents
An amazing planetary system with CSS is a visual representation of a planetary system created using HTML and CSS. It is essentially a digital version of a planetary system that can be displayed in a web browser. The appearance and behavior of the celestial bodies in the system can be customized using various CSS properties and techniques, such as transformations, animations, gradients, and media queries.
A Pure CSS art. I played around with box shadows to see how I could work better with lights and shadows. This is what I'm building. I added darkness, reflections, etc to make it look more natural.
Watch full tutorial on my YouTube Channel: Watch Here.
Let's start making an amazing planetary system Using HTML and Pure CSS step by step.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our moon and satellite. Below is a breakdown of the key components:
1. Document Structure (<!DOCTYPE html>)
<!DOCTYPE html>declares the document type as HTML5.<html lang="en">specifies the language of the document as English.
2. <head> Section
<meta charset="UTF-8">ensures proper character encoding.<meta http-equiv="X-UA-Compatible" content="IE=edge">ensures compatibility with older versions of Internet Explorer.<meta name="viewport" content="width=device-width, initial-scale=1.0">makes the webpage responsive for different screen sizes.<link rel="stylesheet" href="styles.css">links an external CSS file (styles.css) for styling and animations.<title>Planetary System</title>sets the title of the webpage.
3. <body> Section
<div class="moon">represents a moon or planet in the planetary system.- Inside the moon div,
<div class="satellite"></div>represents a satellite (which will orbit around the moon using CSS animations).
After creating the files just paste the following codes into your file. Remember that you must save a file with the .html extension.
Step 2 (CSS Code):
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create box-shadow effect. Below is a breakdown of the key styles and animations:
1. Body Styling
body{
background: #101227;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}- background: #101227; → Sets the background color to dark blue, resembling outer space.
- height: 100vh; → Makes the body take up the full height of the viewport.
- display: flex; → Uses flexbox for centering elements.
- justify-content: center; align-items: center; → Centers content both horizontally and vertically.
2. Moon Styling
.moon{
width: 30em;
height: 30em;
border-radius: 50%;
background: white;
box-shadow:
0 0 5em 0 rgb(254 216 76 / 50%),
0 0 20em 4em rgb(232 165 82 / 20%),
0 0 55em 8em rgb(255 77 77 /10%);
position: relative;
}- width: 30em; height: 30em; → Defines the moon's size.
- border-radius: 50%; → Makes it a perfect circle.
- background: white; → Sets the color of the moon.
- box-shadow: → Creates glowing effects around the moon:
- First shadow (rgb(254 216 76 / 50%)) → A soft yellow glow.
- Second shadow (rgb(232 165 82 / 20%)) → A faint orange glow.
- Third shadow (rgb(255 77 77 /10%)) → A subtle reddish glow.
- position: relative; → Needed for positioning the satellite inside.
3. Satellite Styling
.satellite, .satellite::after{
content: "";
position: absolute;
width: 5em;
height: 5em;
border-radius: 50%;
}- This applies to both .satellite and .satellite::after.
- Creates a circle (border-radius: 50%).
- position: absolute; → Positions the satellite freely inside its container.
.satellite{
background: #ffedd1;
box-shadow: -2em 0 5em -1em white;
overflow: hidden;
transition: 250ms;
left: 32em;
transform: rotate(20deg);
animation: round 5s infinite ease-in-out;
}- background: #ffedd1; → Satellite has a light cream color.
- box-shadow: -2em 0 5em -1em white; → Adds a glowing effect to the satellite.
- overflow: hidden; → Prevents content from overflowing.
- transition: 250ms; → Smoothens animations.
- left: 32em; → Positions the satellite to the right of the moon.
- transform: rotate(20deg); → Rotates it slightly.
- animation: round 5s infinite ease-in-out; → Assigns the round orbit animation (explained below).
4. Satellite's Shadow Effect
.satellite::after{
background: #262938;
width: 2.5em;
left: 2.5em;
box-shadow: 0 0 0.75em 0.95em #262938;
animation: shadow 5s infinite ease-in-out;
}- Creates a shadow behind the satellite.
- animation: shadow 5s infinite ease-in-out; → Assigns a separate animation for changing the shadow.
5. Satellite Shadow Animation
@keyframes shadow{
0% { width: 2.5em; left: 0; }
25% { width: 5em; left: 0; }
50% { width: 2.5em; left: 2.5em; }
75% { width: 0em; left: 5em; }
80% { left: 0; box-shadow: 0 0 0.55em 0.75em #262938; }
100% { width: 2.5em; left: 0; }
}- Controls the size and position of the shadow as the satellite moves around.
6. Responsive Design
@media screen and (max-width: 1000px){
*{
font-size: 10px;
}
}
@media screen and (max-width: 500px){
*{
font-size: 5px;
}
}- Adjusts font sizes based on screen width.
- Smaller screens (≤ 1000px) → Font size is 10px.
- Even smaller screens (≤ 500px) → Font size is 5px.
7. Satellite Orbit Animation
@keyframes round {
0%, 100% {
top: 2em;
left: -15em;
box-shadow: -2em 0 5em 0.5em rgb(198 131 100 / 40%);
z-index: 2;
}
25% { box-shadow: 0 0 3em 1em #412104b5; }
75% { box-shadow: 0 0 3em 1em black; }
48% { z-index: 2; }
50% {
left: 40em;
top: 20em;
z-index: -1;
box-shadow: 2em 0 5em 0.5em rgb(132 90 70 / 51%);
}
99% { z-index: -1; }
}How It Works:
- The satellite moves in a circular orbit around the moon.
- left and top values control the movement path.
- Box shadows change to simulate lighting effects at different positions.
- Z-index is adjusted to move the satellite behind and in front of the moon.
This will give our moon and satellite an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
body{
background: #101227;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.moon{
width: 30em;
height: 30em;
border-radius: 50%;
background: white;
box-shadow: 0 0 5em 0 rgb(254 216 76 / 50%), 0 0 20em 4em rgb(232 165 82 / 20%), 0 0 55em 8em rgb(255 77 77 /10%);
position: relative;
}
.satellite, .satellite::after{
content: "";
position: absolute;
width: 5em;
height: 5em;
border-radius: 50%;
}
.satellite{
background: #ffedd1;
box-shadow: -2em 0 5em -1em white;
overflow: hidden;
transition: 250ms;
left: 32em;
transform: rotate(20deg);
animation: round 5s infinite ease-in-out;
}
.satellite::after{
background: #262938;
width: 2.5em;
left: 2.5em;
box-shadow: 0 0 0.75em 0.95em #262938;
animation: shadow 5s infinite ease-in-out;
}
@keyframes shadow{
0%{
width: 2.5em;
left: 0;
}
25%{
width: 5em;
left: 0;
}
50%{
width: 2.5em;
left: 2.5em;
}
75%{
width: 0em;
left: 5em;
}
80%{
left: 0;
box-shadow: 0 0 0.55em 0.75em #262938;
}
100%{
width: 2.5em;
left: 0;
}
}
@media screen and (max-width: 1000px){
*{
font-size: 10px;
}
}
@media screen and (max-width: 500px){
*{
font-size: 5px;
}
}
@keyframes round {
0%, 100%{
top: 2em;
left: -15em;
box-shadow: -2em 0 5em 0.5em rgb(198 131 100 / 40%);
z-index: 2;
}
25%{
box-shadow: 0 0 3em 1em #412104b5;
}
75%{
box-shadow: 0 0 3em 1em black;
}
48%{
z-index: 2;
}
50%{
left: 40em;
top: 20em;
z-index: -1;
box-shadow: 2em 0 5em 0.5em rgb(132 90 70 / 51%);
}
99%{
z-index: -1;
}
} Final Output:
Conclusion:
In conclusion, this tutorial has provided step-by-step instructions on how to create an amazing planetary system using HTML and Pure CSS. By following the instructions, readers can build their own planetary system that is visually stunning and can be used for a variety of purposes, including websites, presentations, and educational materials. By using only HTML and Pure CSS, readers can have complete control over the design of their planetary system and create a unique and personalized experience for their audience. With the help of this tutorial, anyone can become a web design master and create impressive and engaging visual content.
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
